{% extends "base.html" %}

{% block title %}
    学习轨迹
{% endblock %}

{% block head %}
{% endblock %}

{% block content %}
    <div class="layui-card">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center; margin-top: 30px;">
            <legend>学习记录管理表</legend>
        </fieldset>
    </div>
    <div class="layui-row" style="text-align: center">
        <table class="layui-hide layui-anim layui-anim-fadein" id="test" lay-filter="test">

        </table>
    </div>
    <div style="margin: 5%; display: none" id="add_info_form">
        <form class="layui-form" id="add_form" method="post" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="add_name" name="bid" lay-verify="title" autocomplete="off"
                           placeholder="请输入姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-block">
                    <select id="departments_selector" lay-filter="department_list">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <div style="height: 100px; margin: 5%; display: none" id="search_info_form">
        <form class="layui-form" id="search_forms" method="post" lay-filter="example">
            <div class="layui-form-item">
                <label class="layui-form-label">筛选值</label>
                <div class="layui-input-block">
                    <select id="search_selector" lay-filter="search_list">
                        <option value=""></option>
                        <option value="0">资料标题</option>
                        <option value="1">时间区间</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">时间区间</label>
                <div class="layui-input-block">
                    <select id="time_zone_selector" lay-filter="time_list" disabled="disabled">
                        <option value=""></option>
                        <option value="1">最近1天</option>
                        <option value="2">最近1周</option>
                        <option value="3">更早时间</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">搜索值</label>
                <div class="layui-input-block">
                    <input type="text" id="search_form" name="bid" lay-verify="title" autocomplete="off"
                           placeholder="请输入信息" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm  layui-btn-normal" lay-event="seekData">查找记录</button>
            <button class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="mutidelData">删除选择内容</button>
            <button class="layui-btn layui-btn-sm  layui-btn" lay-event="showData">显示全部记录</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-sm" lay-event="check">继续学习</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </script>
{% endblock %}

{% block script %}
    <script>
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var table_data;
        var data_length;
        var page_limit = 15;
        var option = {
            elem: '#test'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '学习记录数据表'
            , cellMinWidth: 80
            , data: ""
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {type: 'numbers', title: '序号', align: 'center', fixed: 'left'}
                , {field: 'preStudyName', title: '资料标题', align: 'center'}
                , {field: 'createTime', title: '学习时间', align: 'center', sort: true}
                , {field: 'RowTools', fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]],
            initSort: {
                field: 'createTime',
                type: 'desc'
            }
            , page: true
            , limit: page_limit
            , id: 'employee_table'
        };

        !load_table();

        $('#employees').addClass('layui-this');

        function load_table() {
            var index = layer.load(1);
            $.ajax({
                url: '/api/study_history/list',
                type: 'GET',
                async: true,
                data: {},
                success: function (res) {
                    if (res.code === '200' || res.code === '2001') {
                        var data = res.data;
                        load_rows(data);
                        layer.close(index);
                    } else {
                        layer.msg(res.msg);
                        layer.close(index);
                    }
                },
                error: function f(res) {
                    alert("请求失败！状态码：" + res.status);
                    layer.close(index);
                }
            })
        }

        function load_rows(data) {
            var table = layui.table;
            table_data = data;
            data_length = data.length;
            option['data'] = data;
            table.render(option);
        }

        !function (obj) {
            var delete_datas = [];

            table.on('checkbox(test)', function (obj) {
                if (obj.checked) {
                    if (obj.type === 'all') {
                        delete_datas = [];
                        var length = table_data.length > page_limit ? page_limit : table_data.length;
                        for (var i = 0; i < length; i++) {
                            var data = table_data;
                            delete data[i]['LAY_TABLE_INDEX'];
                            delete data[i]['LAY_CHECKED'];
                            delete_datas.push({'index': JSON.stringify(i), 'data': data[i]});
                        }
                        {#console.log(delete_datas);#}
                    } else {
                        var rowIndex = $(obj.tr).attr("data-index");
                        delete_datas.push({'index': rowIndex, 'data': obj.data}); // 获取表格中选中行的数据
                        console.log(delete_datas);
                    }
                } else {
                    if (obj.type === 'all') {
                        delete_datas = [];
                        {#console.log(delete_datas);#}
                    } else {
                        var rowIndex = $(obj.tr).attr("data-index");
                        for (var i = 0; i < delete_datas.length; i++) {
                            if (delete_datas[i]['index'] === rowIndex) {
                                delete_datas.splice(i, 1);
                            }
                        }
                        {#console.log(delete_datas);#}
                    }
                }
            });

            //头工具栏事件
            table.on('toolbar(test)', function (obj) {
                switch (obj.event) {
                    case 'seekData':
                        var tag_name, keyword;
                        layer.open({
                            type: 1,
                            title: "查找信息",
                            btn: ['查找'],
                            shadeClose: true,
                            shade: 0,
                            area: ['400px', '350px'],
                            content: $("#search_info_form"),
                            success: function (layero, index) {
                                $('#search_selector').val("");
                                $('#search_form').val("");
                                form.render('select');
                                form.on('select(search_list)', function (data) {
                                    tag_name = data.elem[data.elem.selectedIndex].text;
                                    if (tag_name === '时间区间') {
                                        $('#time_zone_selector').removeAttr("disabled");
                                    }
                                    if (tag_name === '资料标题') {
                                        $('#time_zone_selector').prop("disabled", 'disabled');
                                    }
                                    form.render('select');
                                });
                            },
                            yes: function (ind) {
                                var index = layer.load(1);
                                if (tag_name === '时间区间') {
                                    if (keyword === '最近一天') {
                                        keyword = '1'
                                    } else if (keyword === '最近一周') {
                                        keyword = '7'
                                    } else {
                                        keyword = '365'
                                    }
                                } else {
                                    keyword = $('#search_form').val();
                                }
                                $('#search_info_form').css('display', 'none');
                                $.ajax({
                                    url: '/api/study_history',
                                    type: 'GET',
                                    async: true,
                                    data: {
                                        'tagname': tag_name,
                                        'keyword': keyword
                                    },
                                    success: function (res) {
                                        if (res.code === '200' || res.code === '2001') {
                                            var data = res.data;
                                            option['data'] = data;
                                            table.render(option);
                                            layer.msg('共查找到' + data.length + '条记录');
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg);
                                            layer.close(index);
                                        }
                                    },
                                    error: function f(res) {
                                        alert("请求失败！状态码：" + res.status);
                                        layer.close(index);
                                    }
                                });
                                layer.close(ind);
                            }
                        });
                        break;
                    case'mutidelData':
                        layer.confirm('真的删除所有选中行吗', function (index) {
                            var ind = layer.load(1);
                            if (JSON.stringify(delete_datas) === '[]' || JSON.stringify(delete_datas[0]['data']) === '{}') {
                                layer.close(index);
                                layer.msg('勾选左侧多选框删除多项数据');
                                layer.close(ind);
                            } else {
                                $.ajax({
                                    url: '/api/study_history/list',
                                    type: 'DELETE',
                                    async: true,
                                    data: {'data': JSON.stringify(delete_datas)},
                                    success: function (res) {
                                        if (res.code === '200') {
                                            layer.msg('删除报刊数据成功!');
                                            load_table();
                                            layer.close(ind);
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg);
                                            layer.close(ind);
                                            layer.close(index);
                                        }
                                    },
                                    error: function f(res) {
                                        alert("请求失败！状态码：" + res.status);
                                        layer.close(index);
                                    }
                                });
                            }
                        });
                        break;
                    case 'showData':
                        load_table();
                        break;
                }
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layui.use(['layer', 'jquery'], function () {
                        var layer = layui.layer;
                        var element = layui.element;
                        layer.open({
                            title: "删除信息",
                            btn: ['确定', '取消'],
                            shadeClose: true,
                            shade: 0.3,
                            content: "确认删除?",
                            yes: function (ind) {
                                var index = layer.load(1);
                                $.ajax({
                                    url: '/api/study_history',
                                    type: 'DELETE',
                                    async: true,
                                    data: {
                                        'preStudyName': obj.data['preStudyName']
                                    },
                                    success: function (res) {
                                        if (res.code === '200') {
                                            var data = res.data;
                                            layer.msg('删除历史数据成功!');
                                            for (var i = 0; i < table_data.length; i++) {
                                                if (table_data[i]['preStudyName'] === data['preStudyName']) {
                                                    table_data.splice(i, 1);
                                                }
                                            }
                                            option['data'] = table_data;
                                            obj.del();
                                            element.render('table');
                                            table.render(option);
                                            layer.close(ind);
                                            layer.close(index);
                                        } else {
                                            layer.msg(res.msg);
                                            layer.close(index);
                                        }
                                    },
                                    error: function f(res) {
                                        alert("请求失败！状态码：" + res.status);
                                        layer.close(index);
                                    }
                                });
                            },
                            btn2: function () {
                                var rowIndex = $(obj.tr).attr("data-index");
                                $(".layui-table tbody tr").eq(rowIndex).removeClass("layui-table-click");
                                $(obj.tr[1]).removeClass("layui-table-click");
                            },
                            cancel: function () {
                                var rowIndex = $(obj.tr).attr("data-index");
                                $(".layui-table tbody tr").eq(rowIndex).removeClass("layui-table-click");
                                $(obj.tr[1]).removeClass("layui-table-click");
                            }
                        })
                    })
                } else if (obj.event === 'check') {
                    var index = layer.load(1);
                    var rowdata = {
                        'codeID': obj.data['codeID'],
                        'infomationID': obj.data['infomationID'],
                        'webID': obj.data['webID'],
                        'preStudyName': obj.data['preStudyName'],
                        'preStudyUrl': obj.data['preStudyUrl']
                    };
                    $.ajax({
                        url: '/api/study_history',
                        type: 'POST',
                        data: rowdata,
                        async: true,
                        success: function (res) {
                            if (res.code === '200') {
                                location.href = obj.data['preStudyUrl'];
                                layer.close(index);
                            } else {
                                layer.close(index);
                                layer.msg('访问出错');
                            }
                        },
                        error: function f(res) {
                            alert("请求失败！状态码：" + res.status);
                            layer.close(index);
                        }
                    })
                }
            });
        }();
    </script>
{% endblock %}